<template>
  <div id="mine" v-if="userInfo.token">
    <!-- 头部 -->
    <van-nav-bar title="我的" :fixed="true" :border="false" />
    <!-- 用户信息 -->
    <van-cell-group style="margin-top:3.5rem">
      <van-cell
        is-link
        @click.prevent="$router.push('/dashboard/mine/usercenter')"
        style="background-color:#3bba63; color:#fff"
        :center="true
      "
      >
        <template slot="title">
          <div class="personMsg">
            <img src="./images/yj.jpg" alt />
            <div class="personInfo">
              <span>{{userInfo.real_name}}</span>
              <span>手机号 : {{userInfo.phone}}</span>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="label" title="我的订单" value="查看全部订单" is-link />
      <van-grid :column-num="4">
        <van-grid-item
          v-for="(order, index) in orderData"
          :key="index"
          :icon="order.icon"
          :text="order.title"
        />
      </van-grid>
    </van-cell-group>

    <van-cell-group style="margin-top:0.6rem">
      <van-cell icon="coupon" title="我的优惠券" value="1张" is-link />
      <van-cell icon="map-marked" title="我的收货地址" value is-link @click.prevent="chooseAddress" />
    </van-cell-group>
    <van-cell-group style="margin-top:0.6rem">
      <van-cell icon="phone" title="联系客服" value="客服时间 07:00-22:00" is-link />
      <van-cell icon="comment" title="意见反馈" value is-link />
    </van-cell-group>

    <van-cell-group style="margin-top:0.6rem">
      <van-cell icon="youzan-shield" title="买菜App" value="下载APP体验效果更佳" is-link />
    </van-cell-group>

    <!-- 路由出口 -->
    <transition name="router-slider" mode="out-in">
      <router-view />
    </transition>
  </div>
  <Selectlogin v-else />
</template>


<script>
import Selectlogin from "./../login/SelectLogin";
import { mapState } from "vuex";
export default {
  name: "mine",
  data() {
    return {
      orderData: [
        { icon: "refund-o", title: "待支付" },
        { icon: "logistics", title: "待收货" },
        { icon: "smile-comment-o", title: "待评价" },
        { icon: "cash-back-record", title: "售后/退款" }
      ]
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  components: {
    Selectlogin
  },
  methods: {
    chooseAddress() {
      this.$router.push("/confirmOrder/myAddress");
    }
  }
};
</script>


<style lang='less' scoped>
#mine {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: #f5f5f5;
}

.van-nav-bar {
  background-color: #3bba63;

  .van-nav-bar__title {
    color: #fff;
    font-size: 1.5rem;
  }
}

.personMsg {
  display: flex;
  flex-direction: row;
  align-items: center;

  img {
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    border: 1px solid #fff;
  }

  .personInfo {
    display: flex;
    flex-direction: column;
    margin-left: 0.8rem;
  }
}
.van-cell__left-icon {
  color: orangered;
  font-size: 1.5rem;
}

// 转场动画
.router-slider-enter-active,
.router-slider-leave-active {
  transition: all 0.3s;
}

router-slider-enter,
.router-slider-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>